<template>
  <!-- 区域首页 -->
  <div>
    <div v-for="m in menuNavAreapictures" :key="m.id">
      <div v-if="m.id == $route.query.id">
        <!-- 头部 -->
        <top-nav>
          <div class="div-top">{{ m.label1 }}</div>
        </top-nav>
        <!-- 搜索框 -->
        <Input-nav></Input-nav>
        <!-- 图片 -->
        <div class="img">
          <img :src="m.img" alt="" />
        </div>
        <div class="kongbai"></div>
        <!-- 中间list -->
        <div class="list-box">
          <div class="list">
            <div v-for="w in imgs" :key="w.label">
              <RouterLink :to="{
                path: '/area-list',
                query: { label: w.label, id: m.id, title: w.title }
              }">
                <img :src="w.img" alt="" />
              </RouterLink>
              <div>{{ w.label }}</div>
            </div>
            <div></div>
          </div>
        </div>
        <div class="kongbai"></div>
        <div class="coolect" v-for="a in coolect" :key="a">
          <div class="coolect-1">
            <span class="span-1">{{ a }}</span>
            <span class="span-2">查看更多 ></span>
          </div>
          <div class="coolect-2" v-if="a === '景区'">
            <div v-for="q in menuNavScenic" :key="q.id">
              <img :src="q.img" alt="" />
              <div>{{ q.label }}</div>
            </div>
          </div>
          <div class="coolect-2" v-if="a === '美食'">
            <div v-for="q in menuNavFood" :key="q.id">
              <img :src="q.img" alt="" />
              <div>{{ q.label }}</div>
            </div>
          </div>
          <div class="coolect-2" v-if="a === '酒店名宿'">
            <div v-for="q in menuNavHotel" :key="q.id">
              <img :src="q.img" alt="" />
              <div>{{ q.label }}</div>
            </div>
          </div>
          <div class="coolect-2" v-if="a === '特色产品'">
            <div v-for="q in menuNavFeature" :key="q.id">
              <img :src="q.img" alt="" />
              <div>{{ q.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getScenic, getFood, getLocalfeatures, getHotel, getAreapictures,
} from '@/api/home';
import { getSceniclist } from '@/api/sceniclist';

import img1 from '@/assets/aaa景区@2x.png';
import img2 from '@/assets/aaa美食@2x.png';
import img3 from '@/assets/aaa酒店民宿@2x.png';
import img4 from '@/assets/aaa特色产品@2x.png';
import img5 from '@/assets/aaa赏花@2x.png';
import img6 from '@/assets/aaa节庆@2x.png';
import img7 from '@/assets/aaa采摘@2x.png';

export default {
  data() {
    return {
      imgs: [
        {
          img: img1,
          label: '景区',
          title: 'scenic',
        },
        {
          img: img2,
          label: '美食',
          title: 'food',
        },
        {
          img: img3,
          label: '酒店民宿',
          title: 'hotel',
        },
        {
          img: img4,
          label: '特色产品',
          title: 'feature',
        },
        {
          img: img5,
          label: '赏花',
          title: 'shanghua',
        },
        {
          img: img6,
          label: '节庆',
          title: 'jieqing',
        },
        {
          img: img7,
          label: '采摘',
          title: 'caizhai',
        },
      ],
      coolect: {
        jingqu: '景区',
        meishi: '美食',
        jiudian: '酒店名宿',
        tese: '特色产品',
      },
      menuNav: [],
      menuNavFood: [],
      menuNavFeature: [],
      menuNavHotel: [],
      menuNavScenic: [],
      menuNavAreapictures: [],
    };
  },
  created() {
    this.getScenic();
    this.getFood();
    this.getLocalfeatures();
    this.getHotel();
    this.getSceniclist();
    this.getAreapictures();
  },
  methods: {
    async getScenic() {
      const { data } = await getScenic();
      this.menuNav = data;
    },
    async getFood() {
      const { data } = await getFood();
      this.menuNavFood = data;
    },
    async getLocalfeatures() {
      const { data } = await getLocalfeatures();
      this.menuNavFeature = data;
    },
    async getHotel() {
      const { data } = await getHotel();
      this.menuNavHotel = data;
    },
    async getSceniclist() {
      const { data } = await getSceniclist();
      this.menuNavScenic = data;
    },
    async getAreapictures() {
      const { data } = await getAreapictures();
      this.menuNavAreapictures = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.div-top {
  font-size: 17px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  line-height: 44px;
}

.img {
  margin: 0;
  width: 375px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;

  img {
    width: 345px;
    height: 150px;
  }
}

.kongbai {
  width: 375px;
  background: #f5f5f5;
  height: 10px;
}

.list-box {
  width: 375px;
  display: flex;
  justify-content: center;

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 355px;

    >div {
      width: 60px;
      margin: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
      }

      div {
        font-size: 13px;
        color: #333333;
        letter-spacing: 0;
      }
    }
  }
}

.coolect {
  width: 375px;
  height: 150px;

  .coolect-1 {
    width: 345px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    .span-1 {
      font-size: 17px;
      color: #333333;
    }

    .span-2 {
      font-size: 13px;
      color: #999999;
      letter-spacing: 0;
      text-align: right;
    }
  }

  .coolect-2 {
    width: 345px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    >div {
      box-shadow: 1px 4px 10px 0 rgba(0, 0, 0, 0.08);
      border-radius: 2px;
      width: 108px;
      height: 98px;

      img {
        width: 108px;
        height: 66px;
      }

      div {
        font-size: 12px;
        color: #000000;
        text-align: center;
        height: 22px;
        line-height: 22px;
      }
    }
  }
}
</style>
